<template>
    <div id="player" v-if="this.$store.state.track.url">
        <div class="card border-0 shadow-lg bg-light">
            <div id="cover-collapse">
                <img class="cover-img card-img-top collapse show" :src="this.$store.state.track.album.picUrl" :alt="this.$store.state.track.name"/>
                <audio class="w-100" autoplay="autoplay" controls="controls" :src="this.$store.state.track.url"/>
            </div>
            <div class="card-body" style="position: relative">
                <h4 class="card-title">
                    {{ this.$store.state.track.name }}
                    <span class="text-muted" style="font-size: 1rem">/ {{ this.$store.state.track.album.name }}</span>
                </h4>
                <div class="card-text text-muted mb-0" v-for="artist in this.$store.state.track.author" :key="artist.id">
                    {{ artist.name }}
                    <!-- <a class="collapsed card-link" style="float: right" data-toggle="collapse" data-target="#cover-collapse">隐藏</a> -->
                </div>
                <!-- <img class="cover-img cover-img-small" :src="this.$store.state.track.album.picUrl" :alt="this.$store.state.track.name"/> -->
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "player"
    }
</script>

<style scoped>
    .cover-img-small {
        width: 100px;
        /* height: 100px; */
        /* position: absolute; */
        /* top: 0; */
        /* right: 0; */
        /* position: relative; */
    }
</style>